<template>
    <div>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image"/>
            </van-swipe-item>
        </van-swipe>

        <van-cell-group>
            <van-cell title="2019套票">
                <template slot="right-icon">
                    <span class="custom-text sale_price">热销价:$123</span>
                    <span class="custom-text market-price">市场价:$1234</span>
                </template>
            </van-cell>
        </van-cell-group>
        <div class="btn-group">
            <van-button type="primary">2019居游旅游年票<br>通用票(限购一张)</van-button>
            <van-button type="warning">2019居游旅游年票<br>儿童票(限购二张)</van-button>
        </div>
        <div class="main">
            <van-tabs v-model="active" animated>
                <van-tab title="年票内容">
                    <div class="list-item">
                        <div class="list-img">
                            <img src="https://shangke2.oss-cn-qingdao.aliyuncs.com/app/ticket/view1541239144000/大健康方图.jpg">
                            <div class="book-label">预约体检 保障体验</div>
                            <div class="cw-label">预约电话: 400 8078079</div>
                        </div>
                        <div class="list-mes">
                            <div class="list-title">居游年票体检套餐</div>
                            <div class="list-mes-item">
                                <span class="list-del-price">门市价 ¥286</span>
                            </div>
                            <div class="hd-font-2 hd-black-03">2019-01-01~2019-12-31</div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="list-img">
                            <img src="https://shangke2.oss-cn-qingdao.aliyuncs.com/app/ticket/view1541239144000/大健康方图.jpg">
                            <div class="book-label">预约体检 保障体验</div>
                            <div class="cw-label">预约电话: 400 8078079</div>
                        </div>
                        <div class="list-mes">
                            <div class="list-title">居游年票体检套餐</div>
                            <div class="list-mes-item">
                                <span class="list-del-price">门市价 ¥286</span>
                            </div>
                            <div class="hd-font-2 hd-black-03">2019-01-01~2019-12-31</div>
                        </div>
                    </div>
                    <div class="list-item">
                        <div class="list-img">
                            <img src="https://shangke2.oss-cn-qingdao.aliyuncs.com/app/ticket/view1541239144000/大健康方图.jpg">
                            <div class="book-label">预约体检 保障体验</div>
                            <div class="cw-label">预约电话: 400 8078079</div>
                        </div>
                        <div class="list-mes">
                            <div class="list-title">居游年票体检套餐</div>
                            <div class="list-mes-item">
                                <span class="list-del-price">门市价 ¥286</span>
                            </div>
                            <div class="hd-font-2 hd-black-03">2019-01-01~2019-12-31</div>
                        </div>
                    </div>

                </van-tab>
                <van-tab title="年票福利">
                    <img src="../../../assets/upgrade50.jpeg"/>
                    <img src="../../../assets/upgrade50.jpeg"/>
                </van-tab>
                <van-tab title="使用须知">
                    使用方式：
                    <p>1.使用方式使用方式使用方式使用方式使用方式使用方式使用方式</p>
                    <p>2.使用方式使用方式使用方式使用方式使用方式</p>
                    <p>3.使用方式使用方式使用方式使用方式使用方式使用方式使用方式使用方式使用方式</p>
                </van-tab>
                <!-- <van-tab v-for="index in 4" :title="'选项 ' + index">
                    内容 {{ index }}
                </van-tab> -->
            </van-tabs>
        </div>

    </div>

</template>
<script>
export default {
  data () {
    return {
      images: [
        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg'
      ],
      active: 0
    }
  }
}
</script>

<style src="./index.css" scoped>
</style>
